<template>
  <div class="common-wrap">
    <div class="containerPickup">
      <MyForm
        v-model:formData="formData"
        v-model:columns="formColumns"
        :rules="rules"
        :porpModel="true"
        labelWidth="120"
        :saveBtnLoading="saveBtnLoading"
        @submit="onSubmit"
      >
      </MyForm>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import i18n from "@/lang/index.js";
import * as api from "@/api/index.js";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
const router = useRoute();
const formData = ref({});
const formColumns = ref([
  {
    title: "提柜信息",
    structure: [
      {
        title: "装柜信息",
        formLayout: "el-row-column",
        content: [
          {
            content: [
              {
                label: "提柜地址",
                type: "label_input",
                prop: "pickupContainerAddress",
                inputType: "textarea",
              },
              {
                label: "还柜地址",
                type: "label_input",
                prop: "returnContainerAddress",
                inputType: "textarea",
              },
              {
                label: "预提日期",
                prop: "expectPickContainerDate",
                type: "label_date",
                format: "YYYY-MM-DD",
                valueFormat: "YYYY-MM-DD",
                dateType: "date",
              },
              {
                label: "计划做箱时间",
                prop: "planLoadContainerTime",
                type: "label_date",
                format: "YYYY-MM-DD HH:mm",
                valueFormat: "YYYY-MM-DD HH:mm",
              },
              {
                label: "拖车代理",
                prop: "trailerAgentCode",
                name: "trailerAgentName",
                type: "remote_select",
                placeholder: "请选择订舱代理",
                params: {
                  searchKey: "keyword",
                  keyValue: "customerCode",
                  name: "customerNameZh",
                  abbreviation: "customerCode",
                  showCustomizedOption: true,
                  displayKey: {
                    coopTypeStr: "coopTypeStr",
                    customerAbbr: "customerAbbr",
                  },
                  fixedParams: {
                    coopType: "1",
                  },
                },
                paramsKey: {
                  trailerAgentName: "customerNameZh",
                },
                apiModule: api.default.common.customers.selectAllCoopList,
              },
              {
                label: "司机名称",
                prop: "driverName",
                type: "label_input",
              },
              {
                label: "司机电话",
                prop: "driverTel",
                type: "label_input",
              },
              {
                label: "车牌号",
                prop: "licensePlate",
                type: "label_input",
              },
            ],
          },
          {
            type: "el_label_tabel",
            prop: "pickupAddressList",
            tableIndex: 0,
            height: 300,
            xl: 18,
            lg: 16,
            columns: [
              {
                type: "checkbox",
                width: 50,
                fixed: "left",
                align: "center",
              },
              {
                field: "addressName",
                title: "工厂名称",
                editRender: {},
                slots: { edit: "input_edit" },
              },
              {
                field: "address",
                title: "详细地址",
                editRender: {},
                slots: { edit: "input_edit" },
              },
              {
                field: "contactName",
                title: "联系人",
                editRender: {},
                slots: { edit: "input_edit" },
              },
              {
                field: "contactPhone",
                title: "联系电话",
                editRender: {},
                slots: { edit: "input_edit" },
              },
              {
                field: "containerWeight",
                title: "提货顺序",
                editRender: {},
                slots: { edit: "input_edit" },
                params: {
                  type: "number",
                },
              },
            ],
            editRules: {},
            multipleSelection: [],
            buttonType: ["add", "delete"],
            batchDelete: true,
            keepSource: true,
            changeEditNeedTrigger: false,
            keepSourceKey: "addressName",
            tableId: "pickupAddressList",
          },
        ],
      },
      {
        title: "箱信息",
        type: "tabel",
        prop: "pickupContainerList",
        tableIndex: 1,
        height: 300,
        fixedParameters: {
          fileList: 'fileList',
        },
        columns: [
          {
            type: "checkbox",
            width: 50,
            fixed: "left",
            align: "center",
          },
          {
            field: "containerSortNo",
            title: "柜序",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "containerCode",
            title: "柜型",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "containerNo",
            title: "柜号",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "sealNumber",
            title: "封号",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "containerWeight",
            title: "柜重",
            editRender: {},
            slots: { edit: "input_edit" },
            params: {
              type: "number",
              precision: 2,
            },
          },
          {
            field: "fileList",
            title: "图片信息",
            editRender: {},
            slots: { edit: "input_edit" },
          },
        ],
        editRules: {},
        multipleSelection: [],
        buttonType: ["add", "delete"],
        batchDelete: true,
        keepSource: true,
        changeEditNeedTrigger: false,
        keepSourceKey: "containerSortNo",
        tableId: "pickupContainerList",
      },
    ],
  },
]);
const rules = ref({});
const saveBtnLoading = ref(false);
onMounted(() => {
  if (router.query.detailed) {
    getInfo();
  }
});
const getInfo = () => {
  saveBtnLoading.value = true;
  api.default.order.maritimeAdministration
    .getPickupContainerInfo({
      trackingNo: router.query.detailed,
    })
    .then((res) => {
      formData.value = {
        trackingNo: router.query.detailed || "",
        ...res.data?.pickupLoadContainer,
        ...res.data,
        fileList:[]
      };
    })
    .finally(() => {
      saveBtnLoading.value = false;
    });
};

const onSubmit = () => {
  const params = {
    ...formData.value,
    pickupLoadContainer: {
      ...formData.value,
    },
  };
  saveBtnLoading.value = true;
  api.default.order.maritimeAdministration
    .pickupContainerEdit(params)
    .then((res) => {
      ElMessage.success(i18n.global.t("修改成功"));
      saveBtnLoading.value = false;
    })
    .catch(() => {
      saveBtnLoading.value = false;
    });
};
</script>

<style scoped lang="scss">
.containerPickup {
  height: 100%;
}
</style>